<template>
	<view class="home">
		<!-- #ifdef MP -->
		<search-slot>
			<template #left>
				<view class="search-left">
					<view class="iconfont icon-xiaoxi">

					</view>
				</view>
			</template>
			<template #center>
				<view class="flex-1 bg-light search-input" @click="goSearch">
					请输入搜索内容
				</view>
			</template>
			<template #right>
				<view class="search-right" @click="getScanCode">
					<view class="iconfont icon-saoma">

					</view>
				</view>
			</template>
		</search-slot>
		<!-- #endif -->
		<view class="address-wrapper" style="width:750rpx;height: 80rpx;line-height: 80rpx;">
			{{address}}
		</view>
		<scroll-view scroll-x="true" :scroll-into-view="scrollInto" scroll-with-animation :scroll-left="scrollLeft">
			<view class="d-flex navbar-wrapper">
				<view v-for="(item,i) in navbars" :key="i" :id="'tab'+i" :class="currentIndex==i?'active':''"
					class="flex-shrink mx-2 navbars-item" @click="changeIndex(i)">{{item.name}}</view>
			</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH+'px'" :current="currentIndex" @change="changeTab">
			<swiper-item v-for="(newItem,index) in newItems" :key="index">
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="scrollToLower(index)">
						<template v-if="newItem.list.length>0">
							<block v-for="(item,n) in newItem.list" :key="n">
								<!-- 轮播图 -->
								<template v-if="item.type == 'swiper'">
									<swiper-banner :swipers="item.data"></swiper-banner>
								</template>
								<!-- 金刚区 -->
								<template v-else-if="item.type == 'indexnavs'">
									<fast-nav :getPages="getPages"></fast-nav>
								</template>
								<!-- 瓷片区 -->
								<template v-else-if="item.type == 'threeAdv'">
									<three-adv :item="item.data"></three-adv>
								</template>
								<!-- 一图广告 -->
								<template v-else-if="item.type == 'oneAdv'">
									<one-adv :title="item.data.title" :cover="item.data.cover">
									</one-adv>
								</template>
								<!-- 列表流 -->
								<template v-else-if="item.type == 'list'">
									<common-list :news="item.data"></common-list>
								</template>
							</block>
							<view class="py-3 text-center">{{newItem.loadmore}}</view>
						</template>
						<template v-else-if="newItem.forward=='before'">
							<view class="py-3 text-center">
								<image src="../../static/loading.gif" mode="" style="width:120rpx;height:120rpx"></image>
							</view>
						</template>
						<template v-else>
							<view class="py-3 text-center">暂无数据…</view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 	<view class="" ref="qwe" id="qwe">
			我是在学习  ---qqq
		</view> -->
	</view>
	<!-- 	view=div   image= img   text=span -->
</template>

<script>
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	import {
		getHome,
		getPage
	} from '../../api/index.js'
	export default {
		data() {
			return {
				address: '获取定位中…',
				qqmapsdk: '',
				scrollH: 0,
				scrollLeft: '',
				num: 0,
				itemWidth: 0,
				scrollInto: '',
				currentIndex: 0,
				navbars: [],
				newItems: []
			}
		},
		onLoad() {
			this.qqmapsdk = new QQMapWX({
				key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC'
			});
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: (res2) => {
							this.address = res2.result.address
						},
						fail: (error) => {
							console.log('error', error);
						}
					})
				}
			});

		},
		onNavigationBarButtonTap(e) {
			console.log('eee', e);
		},
		onNavigationBarSearchInputClicked(e) {
			console.log('112233', e);
			uni.navigateTo({
				url: '/pages/search/search'
			})

		},
		mounted() {
			this.gethome()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(256);
				}
			});

			// setTimeout(()=>{
			//  // console.log('222222222', uni.createSelectorQuery().in(this).select("#qwe"));
			//  // console.log('11111',uni.getElementById('qwe'));

			// },2000)
			setTimeout(() => {
				let dom = uni.createSelectorQuery().in(this).select(".navbars-item");
				dom.boundingClientRect((data) => {
					this.num = this.navbars.length;
					this.itemWidth = data.width + 40
				}).exec();
			}, 1000)
		},
		computed: {
			getPages() {
				let pagge = []
				if (this.newItems[this.currentIndex]) {
					this.newItems[this.currentIndex].list.forEach(item => {
						if (item.type == 'indexnavs') {
							// item.data  Object.values()   Object.keys()   forin
							let indexnav = Object.values(item.data)
							console.log('itemnav', indexnav);
							// [0,1,2,3,4,5,6,7,8,9] = [[0,1,2,3,4,5,6,7],[8,9]]
							//                               0               1
							//  Math.floor(0/8)  = 0
							//  Math.floor(1/8)  = 0
							//  ……
							//  Math.floor(7/8)  = 0


							//  Math.floor(8/8)  = 1
							//  Math.floor(9/8)  = 1
							indexnav.forEach((v, index) => {
								let page = Math.floor(index / 8)
								if (!pagge[page]) {
									pagge[page] = []
								}
								pagge[page].push(v)
							})

						}
					})
				}
				return pagge
			}
		},
		methods: {
			gethome() {
				getHome().then(res => {
					console.log('res=>', res);
					this.navbars = res.data.category
					for (var i = 0; i < this.navbars.length; i++) {
						let forward = i == 0 ? 'after' : 'before'
						let obj = {
							list: [],
							loadmore: '加载更多…',
							forward:forward
						}
						if (i == 0) {
							obj.list = res.data.data
						}
						this.newItems.push(obj)
						console.log('newsItem', this.newItems);
					}
				})
			},
			getpage(callback = false) {
				let id = this.navbars[this.currentIndex].id;
				let obj = this.newItems[this.currentIndex];
				console.log('obj.list.length', obj.list.length);
				let page = Math.ceil(obj.list.length / 5) + 1
				obj.forward = 'before';
				getPage(id, page).then(res => {
					console.log('resss', res);
					let data = res.data;
					if (data) {
						//把第二页的数据，加到第一页上去
						obj.list = [...obj.list, ...data]
						console.log('1111111', obj.list);
						// 如果页面数据小于5,代表后面没有数据了,文本就变成没有更多了
						obj.loadmore = data.length < 5 ? '没有更多…' : '加载更多…'
					}
					obj.forward = 'after';
					if (typeof callback == 'function') {
						callback()
					}
				})
			},
			scrollToLower(index) {
				//加载更多  加载中  没有更多
				let obj = this.newItems[this.currentIndex];
				if (obj.loadmore == '没有更多…') {
					return;
				} else {
					obj.loadmore = '加载中…'
					setTimeout(() => {
						this.getpage(() => {
							uni.showToast({
								title: '加载成功',
								duration: 1000
							});

						})
					}, 1000)
				}

				console.log('触底了', index);
			},
			//跳转到搜索页
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			//扫码
			getScanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: (error) => {
						console.log('失败', error);
					},
					complete: (res) => {
						console.log('res', res);
					}
				});
			},
			//切换标题
			changeIndex(index) {
				this.currentIndex = index;
				this.scrollInto = 'tab' + index
				this.scrollLeft = this.itemWidth * index - 104 + 'rpx'
			},
			//监听swiper切换
			changeTab(e) {
				this.currentIndex = e.detail.current;
				this.scrollInto = 'tab' + e.detail.current
				this.scrollLeft = this.itemWidth * e.detail.current - 104 + 'rpx'
				if(this.newItems[this.currentIndex].forward=='before'){
					this.getpage()
				}else {
					return;
				}
			}
		}
	}
</script>

<style scoped>
	.search-left,
	.search-right {
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	.search-left .iconfont,
	.search-right .iconfont {
		font-size: 32rpx;
	}

	.search-input {
		height: 60rpx;
		line-height: 60rpx;
		color: #ccc;
		font-size: 28rpx;
		text-indent: 20rpx;
		border-radius: 30rpx;
	}

	.navbar-wrapper {
		width: 750rpx;
		height: 88rpx;
		line-height: 100rpx;
		transform: translateY(-20rpx);
		font-size: 28rpx;
	}
</style>